import { View, Text } from "@tarojs/components";
// eslint-disable-next-line import/first
import { RoomResource, UserPanel } from '@/types/global';
import "./index.less";

interface OperationsProps {
  roomResource?: RoomResource;
  currentPlayerIp?: string; // 当前玩家IP
  onUsePrivilege?: () => void; // 使用特权
  onFillGemBoard?: () => void; // 补充宝石
  onBuyCard?: () => void; // 购买卡片
  onReserveCard?: () => void; // 保留卡片
  onTakeGems?: () => void; // 拿取宝石
  showBuyCard?: boolean; // 是否显示购买卡片按钮
  showReserveCard?: boolean; // 是否显示保留卡片按钮
}

export default function Operations({
  roomResource,
  currentPlayerIp = '1',
  onUsePrivilege,
  onFillGemBoard,
  onBuyCard,
  onReserveCard,
  onTakeGems,
  showBuyCard = false,
  showReserveCard: showReserveCardProp = false
}: OperationsProps) {
  // 如果没有房间资源或不是当前玩家的回合，则不显示操作按钮
  if (!roomResource || roomResource.currentPlayerIp !== currentPlayerIp) {
    return null;
  }

  // 获取当前玩家面板
  const currentPlayerPanel: UserPanel | undefined = roomResource.playerPanels?.[currentPlayerIp];
  
  // 如果没有当前玩家面板数据，则不显示操作按钮
  if (!currentPlayerPanel) {
    return null;
  }

  // 判断是否显示使用特权按钮
  // 条件：玩家有特权数且没有执行补充宝石盘的行动
  const showUsePrivilege = currentPlayerPanel.privilege > 0 && !roomResource.isFilled;

  // 判断是否显示补充宝石按钮
  // 条件：黑袋有宝石
  const showFillGemBoard = roomResource.blackBag && roomResource.blackBag.length > 0;

  // 判断是否显示保留卡片按钮（如果父组件没有传入，则根据宝石盘中金色宝石数量判断）
  const goldGemCount = roomResource.gemPositon?.filter(gemId => {
    if (gemId === "-1") return false;
    const gem = roomResource.gemSource?.find(g => g.id === gemId);
    return gem?.color === 'gold';
  }).length || 0;
  
  const showReserveCard = showReserveCardProp || goldGemCount > 0;

  // 拿取宝石按钮始终显示（作用和点击主界面的宝石盘一样）
  const showTakeGems = true;

  return (
    <View className='operationsContainer'>
      {showUsePrivilege && (
        <View className='operationButton' onClick={onUsePrivilege}>
          <Text className='operationButtonText'>使用特权</Text>
        </View>
      )}
      
      {showFillGemBoard && (
        <View className='operationButton' onClick={onFillGemBoard}>
          <Text className='operationButtonText'>补充宝石</Text>
        </View>
      )}
      
      {showBuyCard && (
        <View className='operationButton' onClick={onBuyCard}>
          <Text className='operationButtonText'>购买卡片</Text>
        </View>
      )}
      
      {showReserveCard && (
        <View className='operationButton' onClick={onReserveCard}>
          <Text className='operationButtonText'>保留卡片</Text>
        </View>
      )}
      
      {showTakeGems && (
        <View className='operationButton' onClick={onTakeGems}>
          <Text className='operationButtonText'>拿取宝石</Text>
        </View>
      )}
    </View>
  );
}